<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引入axios包-->
    <script src="js/axios-0.18.0.js"></script>
    <script>
        //2.axios发送ajax请求
        //get请求
        //axios({请求信息对象}).then(请求并响应成功执行的函数).catch(请求失败执行的函数);
       /* axios({
            method:"get",   //请求方式
            url:"http://localhost:8080/javaweb14/axios01?username=张三"       //请求地址
        }).then(function (resp) {
            //请求成功执行操作 resp是一个形参但是服务器返回的数据会存在该对象里
            // resp.data
            console.log(resp.data);
        }).catch(function (error) {
            //失败执行的操作
            console.log(error.message);
        });*/

        var user = {username:'张三',age:18};
        //post请求
        axios({
            method:"post",
            url:"http://localhost:8080/javaweb14/axios02",
            //data:"username=张三"      //携带请求体参数 可以是带有键值对的字符串 也可以是js对象
            data:user
        }).then(function(resp){
            console.log(resp.data);
        }).catch(function (error) {
        });


        /*扩展：
        *目前为止我们学习的请求仅仅有两个：get post
        * 对于以后学习时，会使用restful风格的请求：
        * 一共有七种（根据功能用不同的请求）：
        * get请求 用于查询的
        * post请求 用于新增的
        * head请求
        * options请求
        * patch请求
        * delete请求  用于删除
        * put请求  用于修改
        *目前记住：携带简单参数如：id  namne 用get即可
        *       携带大量数据如:User  Student 更为方便
        *Axios为以上七种方式都提供了一种简便的调用ajax的方法
        * 称为请求方法别名
        * */

        //get
        //axios.get(url)
       // axios.get("请求路径?参数名=值").then(function (resp) {成功的函数});
        //post
        //axios.post(url,data)
        //axios.post("http://localhost:8080/javaweb14/axios02",user).then(function (resp) {})


    </script>
</head>
<body>


</body>
</html>